import Vue from 'vue'
import ComponentEr from './pages/ComponentEr';
import ComponentEr2 from './pages/ComponentEr2';
// create the model for the E-R diagram
new Vue({
  el: '#root',
  components: {
    'component-er': ComponentEr,
    'component-er2': ComponentEr2,
  },
  data: function() {
    return {
      nodeDataArray: [
        { key: "Products",
          items: [ { name: "ProductID", isPK: true},
                   { name: "ProductName" },
                   { name: "SupplierID"},
                   { name: "CategoryID"}] },
        { key: "Suppliers",
          items: [ { name: "SupplierID", isPK: true},
                   { name: "CompanyName"},
                   { name: "ContactName"},
                   { name: "Address"} ] },
        { key: "Categories",
          items: [ { name: "CategoryID", isPK: true},
                   { name: "CategoryName"},
                   { name: "Description"},
                   { name: "Picture"} ] },
        { key: "Order Details",
          items: [ { name: "OrderID"},
                   { name: "ProductID"},
                   { name: "Quantity"},
                   { name: "Discount"} ] },
      ],
      linkDataArray: [
        { from: "Products", to: "Suppliers", text: "0..N", toText: "1" },
        { from: "Products", to: "Categories", text: "0..N", toText: "1" },
        { from: "Order Details", to: "Products", text: "0..N", toText: "1" }
      ]
    }
  },
  template: '<div><component-er :width="800" :height="600" :source=nodeDataArray :releationShip=linkDataArray ></component-er></div>'
})